#daily-passages-dialog {
    /* Desktop baseline sizing. Smaller breakpoints scale down from here. */
    --daily-shell-pad: 1.25rem;
    --daily-card-pad: 1.08rem;
    --daily-title-size: clamp(1.86rem, 1rem + 3vw, 3.0rem);
    --daily-date-size: clamp(1.3rem, 0.95rem + 1.7vw, 2.0rem);
    --daily-heading-size: clamp(1.0rem, 0.62rem + 1.55vw, 1.5rem);
    --daily-reference-size: clamp(1.0rem, 0.64rem + 1.45vw, 1.4rem);
    --daily-text-size: clamp(1.25rem, 0.83rem + 1.65vw, 1.6rem);
    --daily-separator-size: clamp(1.0rem, 0.72rem + 0.95vw, 0.5rem);
    --daily-button-size: clamp(0.78rem, 0.7rem + 0.35vw, 0.98rem);
    --daily-button-pad-y: clamp(0.36rem, 0.24rem + 0.28vw, 0.54rem);
    --daily-button-pad-x: clamp(0.62rem, 0.42rem + 0.55vw, 0.95rem);

    width: min(78vw, 920px);
    border: none;
    border-radius: 16px;
    padding: 0;
    margin: auto;
    background: #fffef8;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.24);
    color: #1f2937;
}

#daily-passages-dialog::backdrop {
    background: rgba(0, 0, 0, 0.55);
}

.daily-passages-shell {
    padding: var(--daily-shell-pad);
}

.daily-passages-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.daily-passages-title-wrap {
    width: 100%;
    text-align: center;
}

.daily-passages-title-wrap h2 {
    margin: 0;
    font-family: "Cheese", "Segoe UI", sans-serif;
    font-size: var(--daily-title-size);
    text-align: center;
    color: #7c2d12;
    letter-spacing: 0.02em;
}

#daily-passages-date {
    margin: 0.2rem 0 0;
    font-size: var(--daily-date-size);
    color: #4b5563;
}

#daily-passages-close {
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    background: #f3f4f6;
    color: #111827;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

#daily-passages-close:hover {
    background: #e5e7eb;
}

.daily-passages-grid {
    display: grid;
    gap: 1rem;
}

.daily-passage-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "heading actions"
        "text text";
    column-gap: 0.75rem;
    row-gap: 0.25rem;
    align-items: start;
    text-align: left;
    border: 1px solid #eadfcd;
    border-radius: 12px;
    padding: var(--daily-card-pad);
    background: linear-gradient(180deg, #fdf7ec 0%, #f6e7d2 100%);
}

.daily-passage-card h3 {
    margin: 0;
    font-size: var(--daily-heading-size);
    color: #9a3412;
}

.daily-passage-heading-line {
    grid-area: heading;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.daily-passage-separator {
    color: #b45309;
    font-size: var(--daily-separator-size);
    line-height: 1;
}

.daily-passage-reference {
    margin: 0;
    font-size: var(--daily-reference-size);
    font-weight: 700;
    color: #1f2937;
}

.daily-passage-text {
    grid-area: text;
    /* margin: 0.55rem 0 0; */
    font-size: var(--daily-text-size);
    line-height: 1.55;
    color: #111827;
    text-align: left;
}

.daily-passage-actions {
    grid-area: actions;
    justify-self: end;
    align-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.daily-passage-select {
    border: none;
    border-radius: 8px;
    padding: var(--daily-button-pad-y) var(--daily-button-pad-x);
    font-size: var(--daily-button-size);
    font-weight: 700;
    background: #0f766e;
    color: #f9fafb;
    cursor: pointer;
}

.daily-passage-select:hover {
    background: #115e59;
}

.daily-passage-select:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.daily-passage-random {
    border: none;
    border-radius: 8px;
    padding: var(--daily-button-pad-y) var(--daily-button-pad-x);
    font-size: var(--daily-button-size);
    font-weight: 700;
    background: #92400e;
    color: #f9fafb;
    cursor: pointer;
}

.daily-passage-random:hover {
    background: #78350f;
}

.daily-passage-random:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 1099px) {
    #daily-passages-dialog {
        width: min(88vw, 820px);
        --daily-shell-pad: 1rem;
        --daily-card-pad: 0.92rem;
    }
}

@media (max-width: 860px) {
    #daily-passages-dialog {
        width: min(92vw, 740px);
        --daily-shell-pad: 0.86rem;
        --daily-card-pad: 0.8rem;
    }
}

@media (max-width: 620px) {
    #daily-passages-dialog {
        /* Phone sizing */
        width: 95vw;
        --daily-shell-pad: 0.72rem;
        --daily-card-pad: 0.7rem;
    }

    .daily-passages-shell {
        padding: var(--daily-shell-pad);
    }
}